<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="Tooplate">
        <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
              rel="stylesheet">

        <title>ArtXibition Event HTML Template</title>


        <!-- Additional CSS Files -->
        <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">

        <link rel="stylesheet" type="text/css" href="/assets/css/font-awesome.css">

        <link rel="stylesheet" type="text/css" href="/assets/css/owl-carousel.css">

        <link rel="stylesheet" href="/assets/css/tooplate-artxibition.css">
    </head>

    <body>


        <!-- ***** Pre HEader ***** -->
        <div th:replace="Header"></div>


        <div class="page-heading-about">
            <div class="container">
                <div class="row">
                </div>
            </div>
        </div>

        <div class="about-item">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="left-image">
                            <img src="/assets/images/about-image.jpg" alt="party time">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="right-content">
                            <div class="down-content">
                                <h4 th:text="${culturalRelic.getName()}"></h4>
                                <ul>
                                    <li th:text="${culturalRelic.getDescription()}"></li>
                                    <li th:text="${culturalRelic.getEra()}"></li>
                                </ul>
                                <div class="main-dark-button">
                                    <span th:unless="${#arrays.contains(session.collection,culturalRelic.getId())}">
                                        <a th:href="@{/addcollection/{id}(id=${culturalRelic.getId()})}"><i class="fa fa-ticket"></i>收藏</a>
                                    </span>
                                    <span th:if="${#arrays.contains(session.collection,culturalRelic.getId())}">
                                            已收藏
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="about-upcoming-shows">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        <h2 th:text="${culturalRelic.getName()}"></h2>
                        <p th:text="${culturalRelic.getDescription()}"></p>
                        <h4>文物年代时间及地址</h4>
                        <ul>
                            <li><span>活动地址</span></li>
                            <li><span>出土时间：</span><span th:text="${culturalRelic.getCreateTime()}"></span></li>
                            <li><span>文物年代：</span><span th:text="${culturalRelic.getEra()}"></span></li>
                        </ul>
                        <h4>材质及分类</h4>
                        <span>材质：</span><p th:text="${culturalRelic.getMaterial()}"></p>
                        <span>分类：</span><p th:text="${culturalRelic.getCategoryId()}"></p>>
                        <div class="text-button">
                             <span th:unless="${#arrays.contains(session.collection,culturalRelic.getId())}">
                                        <a th:href="@{/addcollection/{id}(id=${culturalRelic.getId()})}">收藏<i class="fa fa-arrow-right"></i></a>
                                    </span>
                            <span th:if="${#arrays.contains(session.collection,culturalRelic.getId())}">
                                            已收藏
                                    </span>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="also-like">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h2>You Might Also Like...</h2>
                    </div>
                    <div class="col-lg-4">
                        <div class="like-item">
                            <div class="thumb">
                                <a href="reservation.html"><img src="/assets/images/like-01.jpg" alt=""></a>
                                <div class="icons">
                                    <ul>
                                        <li><a th:href="event-details"><i class="fa fa-arrow-right"></i></a></li>
                                        <li><a th:href="ticket-details"><i class="fa fa-ticket"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="down-content">
                                <span>Sept 10 to 14, 2021</span>
                                <a href="reservation.html"><h4>Wonder Land Music and Arts Festival</h4></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="like-item">
                            <div class="thumb">
                                <a href="reservation.html"><img src="/assets/images/like-02.jpg" alt=""></a>
                                <div class="icons">
                                    <ul>
                                        <li><a th:href="event-details"><i class="fa fa-arrow-right"></i></a></li>
                                        <li><a th:href="ticket-details"><i class="fa fa-ticket"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="down-content">
                                <span>Oct 11 to 16, 2021</span>
                                <a th:href="event-details"><h4>Big Water Splashing Festival</h4></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="like-item">
                            <div class="thumb">
                                <a href="reservation.html"><img src="/assets/images/like-03.jpg" alt=""></a>
                                <div class="icons">
                                    <ul>
                                        <li><a th:href="event-details"><i class="fa fa-arrow-right"></i></a></li>
                                        <li><a th:href="ticket-details"><i class="fa fa-ticket"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="down-content">
                                <span>Nov 10 to 18, 2021</span>
                                <a th:href="event-details"><h4>Tiger Dance Hip Hop Festival</h4></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div th:replace="footer"></div>


        <!-- jQuery -->
        <script src="/assets/js/jquery-2.1.0.min.js"></script>

        <!-- Bootstrap -->
        <script src="/assets/js/popper.js"></script>
        <script src="/assets/js/bootstrap.min.js"></script>

        <!-- Plugins -->
        <script src="/assets/js/scrollreveal.min.js"></script>
        <script src="/assets/js/waypoints.min.js"></script>
        <script src="/assets/js/jquery.counterup.min.js"></script>
        <script src="/assets/js/imgfix.min.js"></script>
        <script src="/assets/js/mixitup.js"></script>
        <script src="/assets/js/accordions.js"></script>
        <script src="/assets/js/owl-carousel.js"></script>

        <!-- Global Init -->
        <script src="/assets/js/custom.js"></script>

    </body>
</html>